<template>
  <div>
    <el-container class="h-screen">
      <el-main class="flex-[1.5]">
        <el-row :gutter="20" class="h-full" v-if="isSplit">
          <el-col :span="24">
            <VideoContainer v-show="isGroup"></VideoContainer>
            <MapContainer v-show="!isGroup" :mapPoint="mapPoint"></MapContainer>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="h-full" v-if="!isSplit">
          <el-col :span="12">
            <VideoContainer></VideoContainer>
          </el-col>
          <el-col :span="12">
            <MapContainer :mapPoint="mapPoint"></MapContainer>
          </el-col>
        </el-row>
      </el-main>
      <el-footer class="flex-1 pb-5">
        <ControlContainer
          @hanlePoint="hanleMapPoint"
          @hanleComponent="hanleComponent"
          @hanleSplit="hanleSplit"
        ></ControlContainer>
      </el-footer>
    </el-container>
  </div>
</template>
<script setup lang="ts">
import VideoContainer from "./components/VideoContainer.vue";
import MapContainer from "./components/MapContainer.vue";
import ControlContainer from "./components/ControlContainer.vue";
import { ref } from "vue";
const mapPoint = ref({});
const isGroup = ref(false);
const isSplit = ref(true);

function hanleMapPoint(v: any) {
  mapPoint.value = v;
}

function hanleComponent(v: any) {
  isGroup.value = v;
}

function hanleSplit(v: any) {
  isSplit.value = v;
}
</script>
<style scoped>
@media screen and (max-width: 1180px) {
  .el-main {
    flex: 1 !important;
  }
  .el-footer {
    flex: 1.2 !important;
  }
}

@media screen and (max-width: 1000px) {
  .el-footer {
    flex: 1.5 !important;
  }
}

@media screen and (max-width: 820px) {
  .el-footer {
    flex: 1.4 !important;
  }
}

@media screen and (max-width: 500px) {
  .el-footer {
    flex: 2.5 !important;
  }
}
</style>
